<template>
  <div class="container">

    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true">
        <el-form-item label="通知标题">
          <el-input v-model="queryInfo.title" placeholder="请输入通知标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="toAddMynotice">新增通知</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="mynoticeList" border style="width: 100%">
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="title" label="通知名称">
      </el-table-column>
      <el-table-column prop="details" label="通知内容" width="680">
      </el-table-column>
      <el-table-column prop="userId" label="关联用户">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope='scope'>
          <el-link type="primary" @click="toEditMynotice(scope.row)">编辑通知</el-link>
          <el-link type="primary" @click="toDeleteMynotice(scope.row.id)">删除通知</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryInfo.pageNum" :page-sizes="[4, 6, 8, 10]" :page-size="queryInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 新增和修改的对话框 -->

    <!-- dialog中绑定close事件，实现对话框右上角叉号的取消功能 -->
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="cancle">
      <el-form :model="mynotice">
        <el-form-item label="通知名称" label-width="80px">
          <el-input placeholder="请输入通知名称" v-model="mynotice.title"></el-input>
        </el-form-item>
        <el-form-item label="用户Id" label-width="80px">
          <el-input placeholder="请输入用户Id" v-model="mynotice.userId"></el-input>
        </el-form-item>

        <el-form-item label="通知详情" label-width="80px">
          <!-- 富文本编辑器组件 -->
          <quill-editor v-model="mynotice.details"></quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addMynotice">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: '', // 预览图片路径
      dialogVisible: false, // 预览图片的对话框
      // 查询信息对象
      queryInfo: {
        title: '',
        pageNum: 1,
        pageSize: 4
      },
      total: 0,
      mynoticeList: [],
      title: '添加', // 对话框标题
      dialogFormVisible: false, // 是否显示对话框
      mynotice: {
        // 通知对象
        "id":'',
        "title": "",
        "details": "",
        "userId": 1,
      },
      fileList:[],
    }
  },
  methods: {
    // 处理上传成功的函数
    handleSuccess(response){
      // 把上传后的图片路径，交给通知对象的tabularChart
      this.mynotice.tabularchart = response.message;
      console.log(this.mynotice.tabularchart);
    },

    // 删除图片的事件
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
      this.fileList=[]
      // 移除数据
      this.mynotice.tabularChart='';
    },
    // 预览图片事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 添加通知
    addMynotice() {
      if (this.mynotice.id) { // 有值为true  修改
        // .........后面实现..............
        this.$http.post("mynotice/update", this.mynotice)
            .then(resp => {
              if (resp.data.status == 200) {
                // 消息提示
                this.$message.success('修改成功！');
                // 清空数据
                this.mynotice = {
                  // 通知对象
                  "id":'',
                  "title": "",
                  "details": "",
                  "userId": 1,
                }
                this.fileList=[]
                // 关闭对话框
                this.dialogFormVisible = false;
                // 重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
            })
      } else {
        this.$http.post("mynotice/insert", this.mynotice)
            .then(resp => {
              if (resp.data.status == 200) {
                // 消息提示
                this.$message.success('添加成功！');
                // 清空数据
                this.mynotice = {
                  // 通知对象
                  "id":'',
                  "title": "",
                  "details": "",
                  "userId": 1,
                }
                this.fileList=[]
                // 关闭对话框
                this.dialogFormVisible = false;
                // 重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
            })
      }
    },
    //删除
    toDeleteMynotice(id){
      this.mynotice.id = id;
      // 调用后端接口来获取数据
      this.$http.post('mynotice/delete', this.mynotice
      )
          .then(resp => {
            if (resp.data.status === 200) {
              this.$message.success('删除成功！')
              this.fileList=[]
              this.mynotice.id = '';
              this.queryList();
            } else {
              this.$message.error('删除失败！')
              this.fileList=[]
              this.mynotice.id = '';
            }
          })
    },
    // 进入修改的预览数据页面
    toEditMynotice(row) {
      //console.log(row)
      // 赋值
      this.mynotice = row;
      // 设置标题
      this.title = "修改通知";
      // 开启对话框
      this.dialogFormVisible = true;
      // 动态的获取图片的名称并帮到到fileList
      this.fileList=[{
        name:row.tabularChart,
        url:'http://localhost:8888/sfzy/downLoad?filename='+row.tabularchart
      }];
    },
    /// 取消对话框
    cancle() {
      this.dialogFormVisible = false;
      this.mynotice = {
        // 通知对象
        "id":'',
        "title": "",
        "mynoticeintroduce": "",
        "tabularchart": "",
        "details": "",
        "readquantity": 0,
        "collects": 0,
        "teacherId": 1,
        "userId": 1,
      }
      this.fileList=[]
    },
    search(){
      this.queryInfo.pageNum=1;
      this.queryList();
    },
    // 进入添加的对话框
    toAddMynotice() {
      this.title = "新增通知";
      this.dialogFormVisible = true;
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize=size;
      console.log("size"+size)

      this.queryList();
    },
    handleCurrentChange(num) {
      this.queryInfo.pageNum=num;
      console.log('num:'+num)

      this.queryList();
    },
    // 分页查询信息的方法
    queryList() {
      console.log(this.queryInfo);
      // 调用后端接口来获取数据
      this.$http.get('mynotice/find', {
        params: this.queryInfo
      })
          .then(resp => {
            if (resp.data.status == 200) {
              console.log(resp.data)
              this.mynoticeList = resp.data.data.list;
              this.total = resp.data.data.total;
              console.log(this.mynoticeList)
            } else {
              this.$message.error('查询失败！')
            }
          })
    }
  },
  mounted() {
    this.queryList();
  }
}
</script>
<style>
/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container{
  min-height: 200px;
}
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}
</style>